import { Col, Form, Input, message, Modal, Row, Select } from 'antd'
import React, { useEffect, useState } from 'react'
import style from './index.module.scss'
import { addAdminHouseholdApi, getAdminHouseholdDetailsApi, updateAdminHouseholdApi } from '@/apis/household'
export default function index({ isOpen, setIsOpen, hid, mode, pageNumber, lodaData, setSuccessChange }) {
  const [loading, setLoading] = useState(true)
  // 姓名
  const [name, setName] = useState('')
  // 性别
  const [gender, setGender] = useState('')
  // 联系方式
  const [phone, setPhone] = useState('')
  // 地址
  const [address, setAddress] = useState('')
  // 居民户号
  const [householdId, setHouseholdId] = useState('')

  const clear = () => {
    setName('')
    setGender('')
    setPhone('')
    setAddress('')
    setHouseholdId('')
  }

  useEffect(() => {
    if (mode === 'add') {
      clear()
      setLoading(false)
      return
    }
    setLoading(true)
      ; (async () => {
        const res = await getAdminHouseholdDetailsApi(hid)
        const resObj = await res.json()
        setName(resObj.householdName)
        setGender(resObj.gender)
        setPhone(resObj.phone)
        setAddress(resObj.householdAddr)
        setLoading(false)
      })()
  }, [hid, mode])

  const submit = async () => {
    if(!name || !gender || !phone || !address) return message.error('请填写完整信息')
    if (mode === 'change') {
      const res = await updateAdminHouseholdApi(hid, name, gender, phone, address)
      const resObj = await res.json()
      getResult(resObj, '修改成功')
    }
    else if (mode === 'add') {
      if (!householdId) return message.error('请输入居民户号')
      const res = await addAdminHouseholdApi(householdId, name, gender, phone, address)
      const resObj = await res.json()
      getResult(resObj, '添加成功')
      clear()
    }
  }

  const getResult = (obj, msg) => {
    if (obj.code === 2000) {
      setIsOpen()
      setSuccessChange()
      lodaData(pageNumber)
      message.success(msg)
    } else {
      message.error(`${mode === 'change' ? '修改失败' : '添加失败'},服务器返回结果${obj.msg}`)
    }
  }
  return (
    <Modal onClose={clear} onOk={submit} okText={mode === 'change' ? '修改' : '新增'} cancelText='取消' title={mode === 'change' ? '修改人口信息' : '新增人口信息'} open={isOpen} onCancel={() => {
      setIsOpen()
      clear()
    }} loading={loading}>
      <Form>
        {mode === 'add' && <Row className={style['row-style']}>
          <Col span={8} className={style['title-style']}>居民户号</Col>
          <Col span={16} className={style['data-style']}>
            <Form.Item style={{ margin: 0, width: '100%' }} rules={[{ required: true, message: '请输入居民户号' }]}>
              <Input onChange={(e) => setHouseholdId(e.target.value)} placeholder='请输入居民户号' value={householdId} />
            </Form.Item>
          </Col>
        </Row>}
        <Row className={style['row-style']}>
          <Col span={8} className={style['title-style']}>人员姓名</Col>
          <Col span={16} className={style['data-style']}>
            <Form.Item style={{ margin: 0, width: '100%' }} rules={[{ required: true, message: '请输入姓名' }]}>
              <Input onChange={(e) => setName(e.target.value)} placeholder='请输入姓名' value={name} />
            </Form.Item>
          </Col>
        </Row>
        <Row className={style['row-style']}>
          <Col span={8} className={style['title-style']}>性别</Col>
          <Col span={16} className={style['data-style']}>
            <Form.Item style={{ margin: 0, width: '100%' }}  rules={[{ required: true, message: '请选择性别' }]}>
              <Select placeholder='请选择性别' onChange={(value) => setGender(value)} value={gender} options={[
                { value: '1', label: '男' },
                { value: '0', label: '女' },
              ]} style={{ width: '100%' }} />
            </Form.Item>
          </Col>
        </Row>
        <Row className={style['row-style']}>
          <Col span={8} className={style['title-style']}>联系方式</Col>
          <Col span={16} className={style['data-style']}>
            <Form.Item style={{ margin: 0, width: '100%' }} rules={[{ required: true, message: '请输入手机号' }]}>
              <Input onChange={(e) => setPhone(e.target.value)} placeholder='请输入手机号' value={phone} />
            </Form.Item>
          </Col>
        </Row>
        <Row className={style['row-style']}>
          <Col span={8} className={style['title-style']}>地址</Col>
          <Col span={16} className={style['data-style']}><Input.TextArea onChange={(e) => setAddress(e.target.value)} placeholder='请输入地址' value={address} /></Col>
        </Row>
      </Form>
    </Modal>
  )
}
